{% extends 'carry/layout.html' %}

{% block content %}
    {#    {% csrf_token %}#}
    <div id="page-title">
        <h1 class="page-header text-overflow">主机列表</h1>

        <!--Searchbox-->
        <div class="searchbox">
            <div class="input-group custom-search-form">
                <input type="text" class="form-control" placeholder="Search..">
                <span class="input-group-btn">
                    <button class="text-muted" type="button"><i class="pli-magnifi-glass"></i></button>
                </span>
            </div>
        </div>
    </div>
    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    <!--End page title-->
    <!--Breadcrumb-->
    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="active">主机列表</li>
    </ol>
    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    <!--End breadcrumb-->

    <div id="page-content">

        <div class="panel col-lg-3">
            <div class="panel-heading">
                <h3 class="panel-title">主机组</h3>
            </div>
            <div class="panel-body">
                <ul class="list-group">
                    {% for group in  account_obj.host_groups.all %}

                        <li class="list-group-item " onclick="GetHostlist({{ group.id }},this)"><span
                                class="badge badge-success">{{ group.host_user_binds.count }}</span>{{ group.name }}
                        </li>
                    {% endfor %}
                    <li class="list-group-item " onclick="GetHostlist(-1,this)"><span
                            class="badge badge-success">{{ request.user.account.host_user_binds.count }}</span>未分组主机
                    </li>

                </ul>


            </div>
        </div>
        <div class="panel col-lg-9">
            <div class="panel-heading">
                <h3 class="panel-title">主机列表</h3>
            </div>
            <div class="panel-body">

                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>Hostname</th>
                            <th>IP</th>
                            <th>IDC</th>
                            <th>Port</th>
                            <th>Username</th>
                            <th>Login</th>
                            <th>Token</th>
                        </tr>
                        </thead>
                        <tbody id="hostlist">

                        </tbody>
                    </table>
                </div>

            </div>
        </div>

    </div>



    <script>

        function GetToken(self, bind_host_id) {
            $.post("{% url 'get_token' %}", {
                'bind_host_id': bind_host_id,
                'csrfmiddlewaretoken': "{{ csrf_token }}"
            }, function (callback) {
                var data = JSON.parse(callback);
                $(self).parent().next().text(data.token);
            });//end post
        }

        function GetUrl() {
            window.open("https://"+document.domain + ':{{ run_to_url }}')
        }

        function GetHostlist(gid, self) {
            $.get("{% url 'get_host_list' %}", {'gid': gid}, function (callback) {
                var data = JSON.parse(callback);
                var trs = ''
                $.each(data, function (index, i) {
                    var tr = "<tr><td>" + i.host__host_name + "</td><td>" + i.host__ip_addr + "</td><td>" + i.host__idc__name
                        + "</td><td>" + i.host__port + "</td><td>" + i.host_user__username + "</td><td><a class='btn btn-info' " +
                        "onclick=GetToken(this,'" + i.id + "')>Token</a>   <a class='btn btn-info' onclick=GetUrl()>Login</a></td><td ></td></tr>";
                    trs += tr
                });
                $("#hostlist").html(trs);

            });//end get
            $(self).addClass("active").siblings().removeClass('active');

        };


    </script>
{% endblock %}